<template>
  <div class="selfEle">
    <section class="leftSection">
      <selfContainer :height="30" title="车辆概况">
        <ccgkFace :info-arr="['ccgk_lwcc', 'ccgk_qxtcc', 'ccgk_lncc', 'ccgk_txjytcc']"></ccgkFace>
      </selfContainer>
      <selfContainer :height="16" title="车位概况">
        <cwgkFace :infoType="0"></cwgkFace>
      </selfContainer>
      <selfContainer :height="19" title="在线车位类型">
        <zxcwlxFace :infoArr='["zxcwlx_ggtcc", "zxcwlx_qxtcc", "zxcwlx_lstcc", "zxcwlx_txjytcc"]'></zxcwlxFace>
      </selfContainer>
      <selfContainer :height="30" title="各区停车泊位数规模">
        <gqtcbwsgmFace></gqtcbwsgmFace>
      </selfContainer>
    </section>

    <section class="centerSection">
      <selfContainer :height="100" title="车场空间分布">
        <!--        TODO 地图弹框，自主编程-->

        <a-map popupid="popupid3" ref="a-map"> </a-map>
        <dv-border-box-9 id="popupid3" v-if="ifPopup" :color="['#0095FF']" backgroundColor="#00000060"
          class="cckjfbPopup">
          <i @click="hidePopup" class="iconfont icon-close"></i>
          <div class="cckjfbPopupBody">
            <img style="width: 100%;" :src="popupImg" alt="">
            <dv-decoration-4 :reverse="true" />
            <p>场库编号:NK21300331349</p>
            <p>地址:04010100015</p>
            <p>所属区域:河北区</p>
            <p>车位总数:200个</p>
            <p>剩余车位数:210</p>
            <p>充电桩:40个</p>
            <p>类型:社会公共停车场</p>
            <p>备案证号:津3330231</p>
            <p>服务时间:全年全天</p>
            <p>计费标准:1650元/月</p>
            <p>联网状态:接入</p>
            <dv-border-box-8 class="cckjfbPopupButton">
              <div @click="openBigPopup">运行情况详情</div>
            </dv-border-box-8>
          </div>
        </dv-border-box-9>
      </selfContainer>
    </section>

    <section class="rightSection">
      <selfContainer :height="13.3" title="实时车流量">
        <realTimeTraffic></realTimeTraffic>
      </selfContainer>
      <selfContainer :height="17" title="车流量变化趋势">
        <trend></trend>
      </selfContainer>
      <div class="towFaceRow">
        <!--        <div></div>-->
        <selfContainer :height="100" title="车辆高峰">
          <trafficPeak></trafficPeak>
        </selfContainer>
        <selfContainer :height="100" title="停车时长分布">
          <parkingTime></parkingTime>
        </selfContainer>
      </div>
      <selfContainer :height="22" title="泊位利用率">
        <berthUtilization></berthUtilization>
      </selfContainer>
      <selfContainer :height="22" title="当日收费情况">
        <todayCharge></todayCharge>
      </selfContainer>
    </section>
    <bigPopup v-if="ifBigPopup" @closeSelf="ifBigPopup = false"></bigPopup>
  </div>
</template>

<script>
import selfContainer from "@/components/selfContainer/index";
import ccgkFace from "@/components/ccgkFace/index";
import cwgkFace from "@/components/cwgkFace/index";
import gqtcbwsgmFace from "@/components/gqtcbwsgmFace/index";
import zxcwlxFace from "@/components/zxcwlxFace/index";
import realTimeTraffic from "@/components/realTimeTraffic/index";
import trend from "@/components/trend/index";
import berthUtilization from "@/components/berthUtilization/index";
import todayCharge from "@/components/todayCharge/index";
import trafficPeak from "@/components/trafficPeak/index";
import parkingTime from "@/components/parkingTime/index";
import aMap from "@/components/map/index";
import popupImg from "@/assets/selfImp/popupImg.png";
import bigPopup from "@/components/bigPopup/index";
export default {
  name: 'BaseAll',
  components: {
    selfContainer,
    ccgkFace,
    cwgkFace,
    zxcwlxFace,
    realTimeTraffic,
    trend,
    berthUtilization,
    todayCharge,
    gqtcbwsgmFace,
    trafficPeak,
    parkingTime,
    aMap,
    bigPopup
  },
  data() {
    return {
      popupImg,
      ifPopup: true,
      ifBigPopup: false,
    }
  },
  computed: {

  },
  async created() {
    let response = await fetch(`./testData/map-marker-3.json`, {
      method: "get",
      headers: {
        "Content-Type": "application/json",
      },
    });

    console.log("response");
    this.markData = await response.json();
    this.$refs['a-map'].renderMarkers(this.markData, {
      rotation: -411,
      zoom: 18.22,
      pitch: 70.3,
      center: [117.13796, 39.11716]
    })
  },
  mounted() {

  },
  methods: {
    hidePopup() {
      this.$refs['a-map'].closePopup()
    },
    test() {
      console.log("test");
      this.$Toast({
        content: "test"
      })
    },
    openBigPopup() {
      this.ifBigPopup = true;
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.selfEle {
  height: calc(100% - 0.3rem);
  width: calc(100% - 0.3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;

  >section {
    height: 100%;
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  //中间部分
  .centerSection {
    width: 40%;

    .mapImg {
      height: calc(100% - 40px);
      width: calc(100% - 40px);
      margin: 20px;
    }

    .cckjfbPopup {
      //position: absolute;
      height: 51%;
      width: 40%;
      top: 21%;
      left: 15%;

      .iconfont {
        margin: 5% 5% 0 0;
        color: #0160C8;
        float: right;
        font-size: xx-large;
        height: 10%;
        width: 10%;
      }

      .cckjfbPopupBody {
        background-color: rgba($color: #000000, $alpha: 0.4);
        padding: 10%;
        font-size: medium;

        >p {
          line-height: 25px;
          color: aliceblue;
        }

        .cckjfbInfo {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          align-content: center;

          >div {
            width: 45%;
            padding: 6% 0;
            text-align: center;

            >label {
              color: #FFFFFF;
              font-size: initial;
              font-weight: 600;
              margin-right: 5%;
            }

            >span {
              font-size: x-large;
              font-weight: 800;
            }
          }
        }

        .cckjfbPopupButton {
          cursor: pointer;
          width: 80%;
          height: 8%;
          color: aliceblue;
          font-size: larger;
          background: #0086e8;
          position: absolute;
          bottom: -3%;
          display: flex;
          justify-content: center;
          align-items: center;

          ::v-deep .border-box-content {
            height: auto;
            width: auto;
          }
        }
      }
    }
  }

  //左侧部分
  .leftSection {
    .clgk-button {
      padding: 20px;
      color: white;
      font-size: 30px;
    }
  }

  //右侧部分
  .rightSection {
    .towFaceRow {
      height: 18%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      ::v-deep .selfContainer {
        width: 49.5%;
      }
    }
  }
}
</style>
<style>
#popupid3 {
  width: 305px;
}
</style>
